<template>
  <div class="home">
    <div class="nav">
      <nav-bar title="龙脊数据可视化平台" @exit="exit"></nav-bar>
    </div>
    <keep-alive>
      <router-view style="flex: 1"/>
    </keep-alive>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar/index'

export default {
  name: 'Home',
  components: {
    NavBar
  },
  methods: {
    exit () {
      this.$store.dispatch('user/logout').then((res) => {
        if (res.data.status) {
          this.$router.push({ path: '/login' })
        }
      })
    }
  },
  mounted () {
  }
}
</script>

<style>
  .home {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: auto;
    font-size: 1.6rem;
    background: radial-gradient(circle, rgb(0, 125, 255) 0%, transparent 70%) no-repeat 20%/64px 64px,
    radial-gradient(circle, rgb(2, 113, 227) 0%, transparent 70%) no-repeat 10% 20%/72px 72px,
    radial-gradient(circle, rgb(45, 100, 158) 0%, transparent 70%) no-repeat 60% 15%/64px 64px,
    radial-gradient(circle, rgb(0, 125, 255) 0%, transparent 70%) no-repeat 30% 29%/84px 84px,
    radial-gradient(circle, rgb(5, 92, 182) 0%, transparent 70%) no-repeat 90% 34%/64px 64px,
    radial-gradient(circle, rgb(1, 112, 227) 0%, transparent 70%) no-repeat 15% 78%/32px 32px,
    radial-gradient(circle, rgb(17, 132, 252) 0%, transparent 70%) no-repeat 43% 36%/64px 64px,
    radial-gradient(circle, rgb(0, 125, 255) 0%, transparent 70%) no-repeat 48% 93%/48px 48px,
    radial-gradient(circle, rgb(10, 91, 175) 0%, transparent 70%) no-repeat 82% 67%/64px 64px,
    radial-gradient(rgb(16, 0, 92), rgb(2, 0, 38));
    box-sizing: border-box;
  }
</style>
